<template>
  <div class="father">
    <h3>父组件【专门实现祖孙直接传递数据的，避免干扰父组件】</h3>
    <h4>祖先组件数据 银子：{{ money }}万元</h4>
    <h4>祖先组件数据 车子：一辆{{ car.brand }}车，价值{{ car.price }}万元</h4>
    <Child />
  </div>
</template>

<script setup lang="ts" name="Father">
import Child from './Child.vue'
import { provide, reactive, ref } from 'vue'

// 数据
let money = ref(100)
let car = reactive({
  brand: '奔驰',
  price: 100,
})

// 方法
function updateMoney(value: number) {
  money.value -= value
}

// 向后代提供数据【其中参数一是数据的名字，数据二是数据具体的值】，使用provide之后，所有的后代都可以获取到提供的数据了。
provide('moneyContext', { money, updateMoney })
provide('car', car)
</script>

<style scoped>
.father {
  background-color: rgb(165, 164, 164);
  padding: 20px;
  border-radius: 10px;
}
</style>
